<template>
    <div class="container">
        <el-row>
            <el-col :span="18">
				<h1>添加参选单位会员信息</h1>
			</el-col>
			<el-col :span="6" class='btn-panel'>
				<el-button class="editor-btn" type="primary" @click="submit">提交</el-button>
			</el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="6">
                <div class="grid-content">参选单位登录账号：</div>
            </el-col>
            <el-col :span="6">
                <el-input v-model="User.company_user_id" placeholder="请输入参选单位登录账号"></el-input>
            </el-col>
            <el-col :span="6">
                <div class="grid-content">参选单位登录密码：</div>
            </el-col>
            <el-col :span="6">
                <el-input v-model="User.company_userpass" placeholder="请输入参选单位登录密码" show-password></el-input>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="6">
                <div class="grid-content">参选单位用户名：</div>
            </el-col>
            <el-col :span="6">
                <el-input v-model="User.company_username" placeholder="请输入参选单位用户名"></el-input>
            </el-col>
            <el-col :span="6">
                <div class="grid-content">密码确认：</div>
            </el-col>
            <el-col :span="6">
                <el-input v-model="User.company_reuserpass" placeholder="请输入密码" show-password></el-input>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="6">
                <div class="grid-content">参选单位真实姓名：</div>
            </el-col>
            <el-col :span="6">
                <el-input v-model="User.company_userrealname" placeholder="请输入参选单位真实姓名"></el-input>
            </el-col>
            <el-col :span="6">
                <div class="grid-content">联系方式：</div>
            </el-col>
            <el-col :span="6">
                <el-input v-model="User.company_userphone" placeholder="请输入联系方式"></el-input>
            </el-col>            
        </el-row>
    </div>
</template>

<script>
    export default {
        data() {
		    return {
                User: {
                    company_user_id: "",
			        company_username: "",
                    company_userpass:"",
			        company_reuserpass: "",
                    company_userrealname: "",
                    company_userphone: ""
                }
			    
		    };
	    },
        methods:{
            async submit() {			
                await this.addinfoHandler();			    
		    },
            change(value, render) {
			// render 为 markdown 解析后的结果
			this.html = render;
		    },
            change(e){
                this.$forceUpdate();
            },
            async addinfoHandler(){
                //判断输入不能为空
                if(this.User.company_user_id===""
                ||this.User.company_username===""||
                this.User.company_userpass===""||
                this.User.company_reuserpass===""||
                this.User.company_userrealname===""||
                this.User.company_userphone===""){
                    alert("输入项不能为空！");
                    return;
                }else{
                    //不为空继续执行提交操作
                    if(this.User.company_userpass===this.User.company_reuserpass){
                        //向后端提交数据
                        //这里data是后端传递过来的response对象（state,message,data）
                        var data = await this.$http.post('/addcompanyuser',JSON.stringify(this.User));
                        if(data.state=200){
                            //提交成功
                            this.$message.success(data.message);
                            this.$router.push("/company/companyuserlist");
                        }else{
                            this.$message.error(data.message);
                            return;
                        }
                        
                    }else{
                        //两次密码不一致
                        alert("两次密码不一致！");
                        return;
                    }
                }
            }
        }

    }
</script>

<style scoped>
.container {
	position: relative;
	padding: 30px;
	background: #fff;
	border-radius: 5px;
	text-align: left;
}

.top-panel {
	height: 50px;
	line-height: 50px;
	text-align: center;
}

.row-list {
	margin-bottom: 20px;
}

.btn-panel{
    text-align: right;
}

.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
}

.grid-content {
    border-radius: 4px;
    line-height: 40px;
}
</style>
